<template>
  <div class="licenseTable">
    <el-table
    :data="tableData"
    border
    style="width: 100%">
      <el-table-column
        prop="licenId"
        label="编号"
        min-width="99">
      </el-table-column>
      <el-table-column
        prop="bsqsName"
        label="被授权商名称"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="bsqsAddress"
        label="被授权商地址"
        min-width="268">
      </el-table-column>
      <el-table-column
        prop="bsqsContactor"
        label="联系人"
        min-width="90">
      </el-table-column>
      <el-table-column
        prop="bsqsPhone"
        label="联系电话"
        min-width="108">
      </el-table-column>
      <el-table-column
        prop="completeFag"
        label="操作"
        min-width="153">
        <template slot-scope="scope">
          <el-button v-if="scope.row.completeFag" @click="shouquanHandleClick(scope.row)" type="text" size="small">授权码明细</el-button>
          <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="delTableClick(scope.row)"  v-if="!scope.row.completeFag" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-licensees :pushbackPwd="pushbackPwd" ref="editTable"></edit-licensees>
  </div>
</template>
<style lang="stylus">
@import '~styles/varibles.styl'
.lh-wrap .el-table {
  font-size: 14px;
  color: #333;
}
.lh-wrap .el-button--text {
  color: $baseColor;
}
.lh-wrap .el-button--text:focus, .lh-wrap .el-button--text:hover {
  color: $baseColor;
}
.licenseTable .el-table__header-wrapper thead.has-gutter tr th {
  background-color: #f5f6fa;
  color: #333333;
}
</style>
<script>
import EditLicensees from './EditLicensees'
export default {
  name: 'LicenseesTable',
  components: {
    EditLicensees
  },
  methods: {
    shouquanHandleClick (row) {
      console.log(row)
    },
    editHandleClick (row) {
      console.log(row)
      this.$refs.editTable.dialogFormVisible2 = true
      this.pushbackPwd = row.licenId
    },
    delTableClick (row) {
      this.$confirm('确认要删除该被授权商？', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'delLicenseWrapper'
      }).then(() => {
        console.log(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  data () {
    return {
      pushbackPwd: '',
      tableData: [{
        licenId: '1',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '李小亚',
        bsqsPhone: '13230241245',
        completeFag: false,
        modifyPwd: true
      }, {
        licenId: '2',
        bsqsName: '王小虎魄',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '金沙江',
        bsqsPhone: '13230241245',
        completeFag: true,
        modifyPwd: true
      }, {
        licenId: '3',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '路弄',
        bsqsPhone: '13230241245',
        completeFag: true,
        modifyPwd: false
      }, {
        licenId: '4',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '陀金',
        bsqsPhone: '13230241245',
        completeFag: false,
        modifyPwd: true
      }, {
        licenId: '5',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '市江',
        bsqsPhone: '13230241245',
        completeFag: false,
        modifyPwd: false
      }, {
        licenId: '6',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '上沙江',
        bsqsPhone: '13230241245',
        completeFag: true,
        modifyPwd: true
      }, {
        licenId: '7',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '区金沙',
        bsqsPhone: '13230241245',
        completeFag: false,
        modifyPwd: false
      }, {
        licenId: '8',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '普陀路',
        bsqsPhone: '13230241245',
        completeFag: true,
        modifyPwd: true
      }, {
        licenId: '9',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '普陀区',
        bsqsPhone: '13230241245',
        completeFag: false,
        modifyPwd: false
      }, {
        licenId: '10',
        bsqsName: '王小虎',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '上海',
        bsqsPhone: '14556234521',
        completeFag: false,
        modifyPwd: true
      }, {
        licenId: '11',
        bsqsName: '李天一',
        bsqsAddress: '上海市普陀区金沙江路 1518 弄',
        bsqsContactor: '李刚',
        bsqsPhone: '13230241245',
        completeFag: true,
        modifyPwd: false
      }]
    }
  }
}
</script>
<style lang="stylus">
@import '~styles/varibles.styl'
.delLicenseWrapper {
  width: 410px;
  height: 250px;
  border: 4px solid #fff;
  border-radius: 8px;
  margin: 0 auto;
  top: 50%;
}
.delLicenseWrapper .el-message-box__header {
  height: 45px;
  border-bottom: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 0 10px 0 18px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__title {
  line-height: 44px;
  color: #333333;
  font-size: 16px;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0;
  font-size: 16px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.delLicenseWrapper .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
  color: rgb(189, 189, 189);
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.delLicenseWrapper .el-message-box__content {
    position: relative;
    padding: 0;
}
.delLicenseWrapper .el-message-box__message p {
  padding-top: 12px;
  font-size: 16px;
  line-height: 106px;
  height: 118px;
  text-align: center;
}
.delLicenseWrapper .el-message-box__btns {
    padding: 0 71px;
    text-align: center;
    height: 40px;
}
.delLicenseWrapper .el-message-box__btns .el-button {
  width: 120px;
  height: 40px;
  padding: 0;
  text-align: center;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  float: right;
}
.delLicenseWrapper .el-button:focus,.delLicenseWrapper .el-button:hover {
    color: #333333;
    border-color: #E6E6E6;
    background-color: #fff;
}
.delLicenseWrapper .el-message-box__btns .el-button--primary {
    color: #FFF;
    background-color: $baseColor;
    border-color: $baseColor;
    float: left;
    margin-left: 0;
}
</style>
